<!--
精灵图
    1）原因背景
        - 网页中图像过多，服务器会频繁接收、发送图片请求，导致压力过大，降低页面加载速度
    2）精灵技术
        - 有效减少服务器对图片的接收、请求次数，提高页面加载速度
        - 主要针对小背景图片
        - CSS精灵技术（CSS Sprites、CSS雪碧）原理是将众多小背景图整合到一张大图中（这张大图就叫做精灵图），服务器只需请求一次
        - 通过移动精灵图，偏移到小图坐标上，然后将小图显示在指定尺寸大小的容器中
    3）具体做法
        width: xxx;
        height: xxx;
            - 盒子尺寸大小
        background: url(路径);           // 注意这两行代码的顺序：引入在上，偏移在下
        background-position: -x -y;
            或者
        background: 颜色 url 平铺 附着 位置;
            - 偏移坐标必须非常精确
            - 移动大图位置匹配上小图坐标
            - 坐标一般都是负值：x坐标往左、y坐标往上
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        /* 尺寸：60*60 */
        width: 60px;
        height: 60px;
        margin: 100px auto;
        /* 横：96，纵：124 */
        background: url(./resources/pictures/sprites.png);
        background-position: -96px -124px;
        border: 1px solid red;
    }
    /* 案例练习 */
    .case {
        width: 400px;
        height: 60px;
        margin: 20px auto 0 auto;
        background-color: skyblue;
    }
    span {
        display: inline-block;
        width: 60px;
        height: 60px;
        padding: 0 5px;
        background: url(./resources/pictures/sprites.png) no-repeat;
    }
    /* 96*0~n, 124*0~n */
    .ps {
        background-position: -96px -496px;
    }
    .pr {
        background-position: -96px -620px;
    }
    .au {
        background-position: -96px -372px;
    }
</style>

<div class="box"></div>

<div class="case">
    <span class="ps">1*4</span>
    <span class="pr">1*5</span>
    <span class="au">1*3</span>
</div>